<template>
    <div class="scenic_spot_heating">
        <div class="common_header" >
            <div class="header-img"><img src="../assets/imgs/nav_bar_return@2x.png" alt="" @click="$router.go(-1)"></div>
            <div class="header-title">景区热力</div>
        </div>
        <div class="content">
            <div id="hot_map"></div>
            <div class="footer">
                <div class="footer-bar"></div>
                <div class="footer-num">
                    <span><0</span>
                    <span><100</span>
                    <span><200</span>
                    <span><300</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    // import jsom from '../assets/lib/jsom'
    import echarts from 'echarts';
    import {Notify} from 'vant';
    // import '../api.js';
    export default {
        name: "scenicSpotHeating",
        components: {
            [Notify.name]: Notify
        },
        data() {
            return {
                userInfo:{}
            }
        },
        mounted() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.tr_id = localStorage.getItem('tr_id');
            this.getALLData(['hotMap']);
            // this.heatMap();
        },
        methods:{
            heatMap(data) {
                let myChart = echarts.init(document.getElementById('hot_map'));
                let points=[];
                if (data && data.length>0) {
                    for(let i=0;i<data.length;i++) {
                        points.push([data[i].lng,data[i].lat,data[i].count]);
                    }
                }
                let center=[this.userInfo.bindResort.longitude,this.userInfo.bindResort.latitude];
                // let center=[120.14322240845,30.236064370321];
                myChart.setOption({
                    animation: false,
                    bmap: {
                        center: center,
                        zoom: 18,
                        roam: true
                    },
                    visualMap: {
                        show: false,
                        top: 'center',
                        min: 0,
                        max: 300,
                        seriesIndex: 0,
                        calculable: true,
                        inRange: {
                            color: ['#7002FE', '#FDFE03', '#8ADE4E', '#FF3366'],
                        }
                    },
                    series: [{
                        type: 'heatmap',
                        coordinateSystem: 'bmap',
                        data: points,
                        pointSize:10,
                        blurSize: 6
                    }]
                });

                let bmap = myChart.getModel().getComponent('bmap').getBMap();
                bmap.addControl(new BMap.MapTypeControl());
            },
            getALLData(arg) {
                this.$http.get('auth/mac?tr_id=' + this.tr_id,{
                    params: {
                        "@action": arg.join(',')
                    }
                })
                    .then((result)=>{
                        if (result.status_code == 200) {
                            this.heatMap(result.data.hotMap);
                        } else {
                            Notify({
                                message:result.msg,
                                duration: 1000,
                                background: '#ff0000'
                            })
                        }
                    })
                    .catch((err)=>{
                        // this.$store.commit('hideLoading');
                        Notify({
                            message: err.data.msg || "数据异常，请重试",
                            duration: 1000,
                            background: '#ff0000'
                        })
                    })
            }
        }
    }
</script>
<style scoped lang="less">
    .scenic_spot_heating{
        height: 100vh;
    }
    .content{
        width: 100%;
        height: 100%;
        #hot_map{
            width: 100%;
            height: 100vh;
        }
        .footer{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: fixed;
            bottom: 0px;
            left: 0px;
            width: 100%;
            height: 0.6rem;
            background-color: #fff;
            .footer-bar{
                width:3.43rem;
                height:0.14rem;
                /*padding:0.2rem auto 0.1rem;*/
                /*margin: 0.2rem auto 0.1rem;*/

                /*background:linear-gradient(90deg,blue 0%,blue 20%,green 40%,yellow 60%,red 100%);*/
                background:linear-gradient(90deg,#7002FE 0%,#FDFE03 45%,#8ADE4E 55%,#FF3366 100%);
                border-radius:0.07rem;
            }
            .footer-num{
                width:3.43rem;
                /*margin:0 auto;*/
                margin-top: 0.1rem;
                font-size: 0.1rem;
                color:rgba(116,127,161,1);
                display: flex;
                justify-content: space-between;
            }
        }
    }
</style>